import React, { useRef } from "react";
import screenfull from "screenfull";

const Top = (props) => {
  const targetRef = useRef()
  const targetRef1 = useRef()
  const targetRef2 = useRef()
  const fullScreenHandle = (targetRef) => {
    if (screenfull.isEnabled){
      console.log('isFullscreen',screenfull.isFullscreen)
      //  screenfull.isFullscreen返回一个布尔值，当前是否是全屏状态
      //  screenfull.isEnabled  返回一个布尔值，是否当前可以进入全屏
      if (screenfull.isFullscreen) return
      screenfull.toggle(targetRef.current)
    }else{
      console.log('浏览器不支持');
      
    }
  };

  return (
    <div className="top">
      <div style={{height: '200px',textAlign: 'center', backgroundColor: 'gray'}}>上</div>
      <div ref={targetRef} className='full-screen' style={{ marginBottom: '10px', backgroundColor: 'pink', cursor: 'pointer' }} 
      onDoubleClick={() => fullScreenHandle(targetRef)}>中</div>
      <div ref={targetRef1} className='full-screen' style={{ marginBottom: '10px', backgroundColor: 'pink', cursor: 'pointer' }} 
      onDoubleClick={() => fullScreenHandle(targetRef1)}>中1</div>
      <div ref={targetRef2} className='full-screen' style={{ marginBottom: '10px', backgroundColor: 'pink', cursor: 'pointer' }} 
      onDoubleClick={() => fullScreenHandle(targetRef2)}>中2</div>
      <div style={{height: '300px',textAlign: 'center', backgroundColor: '#eee'}}>下</div>
    </div>
  );
};

export default Top;